<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>6.全局注册组件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo"></div>

    <script type="text/javascript">
      
      // Welcome组件
      const Welcome = Vue.extend({
        name:'Welcome',
        template:`<marquee style="background-color:skyblue">欢迎来到{{school}}学习</marquee>`,
        data() {
          return {
            school:'atguigu'
          }
        },
      })
      // 全局注册Welcome组件（其他组件中直接编写Welcome标签即可）
      Vue.component('Welcome',Welcome)

      // Person组件
      const Person = Vue.extend({
        name:'Person',
        template:`
          <div>
            <Welcome/>
            <h2>人员信息</h2>
            <h4>姓名：{{personName}}</h4>
            <h4>年龄：{{personAge}}</h4>
            <button @click="showPersonInfo">点我提示个人信息</button>
          </div>
        `,
        data(){
          return {
            personName:'老段',
            personAge:90,
          }
        },
        methods:{
          showPersonInfo(){
            alert(`我叫${this.personName}，我今年${this.personAge}岁了`)
          }
        },
        
      })
      // School组件
      const School = Vue.extend({
        name:'School',
        template:`
          <div>
            <Welcome/>
            <h2>学校信息</h2>
            <h4>校名：{{schoolName}}</h4>
            <h4>地址：{{schoolAddress}}</h4>
            <button @click="showSchoolInfo">点我提示学校信息</button>
          </div>
        `,
        data(){
          return {
            schoolName:'尚硅谷',
            schoolAddress:'宏福科技园'
          }
        },
        methods:{
          showSchoolInfo(){
            alert(`${this.schoolName}坐落于${this.schoolAddress}`)
          }
        }
      })
      // App组件
      const App = Vue.extend({
        name:'App',
        components:{Person,School},
        template:`
          <div>
            <Person/>
            <hr>
            <School/>
          </div>
        `
      })

      new Vue({
        el:'#demo',
        template:`<App/>`,
        components:{App}
      })
    
    </script>
  </body>
</html>